<template>
  <div class="signin-container">
    <el-card class="signin-card">
      <h2>每日签到</h2>
      <p v-if="currentUser">欢迎，{{ currentUser }}！</p>
      <el-button
        type="primary"
        size="large"
        :disabled="signedInToday"
        @click="handleSignIn"
      >
        {{ signedInToday ? '今日已签到' : '点击签到' }}
      </el-button>

      <div class="history-section" v-if="signInRecords.length">
        <h3>签到历史</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(record, index) in signInRecords"
            :key="index"
            :timestamp="record"
            color="blue"
          >
            签到时间: {{ record }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore.js' // 确保路径正确
import { ElMessage } from 'element-plus'

const store = useUserStore()
const currentUser = store.currentUser
const signedInToday = ref(false)
const signInRecords = ref([])

const checkSignInStatus = () => {
  const today = new Date().toLocaleDateString()
  const records = store.getRecords()
  signInRecords.value = records
  signedInToday.value = records.some((record) => record.startsWith(today))
}

const handleSignIn = () => {
  if (store.signIn()) {
    ElMessage.success('签到成功！')
    checkSignInStatus()
  } else {
    ElMessage.error('今天已经签到过了')
  }
}

onMounted(() => {
  checkSignInStatus()
})
</script>

<style scoped>
/* 你的样式代码 */
</style>
